<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于新零售配送优化系统设计与实现</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.4/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/optimize.css">
    <script src="../static/js/jquery-3.7.1.min.js"></script>
    <script src="../static/js/optimize.js"></script>
</head>
<body class="bg-gray-100">

<!-- 右上角按钮容器 -->
<div class="top-right-buttons">
    <!--    <span class="navbar-text" id="username-display">用户:{{current_user()}}</span>-->
    <!-- 切换导航栏按钮 -->
    <button class="toggle-sidebar-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        <i class="glyphicon glyphicon-list"></i>
    </button>
</div>

<!-- 侧边导航栏 -->
<div class="sidebar bg-gray-800 text-white flex flex-col justify-between h-screen">
    <!-- 导航栏顶部 -->
    <div>
        <div class="text-center py-4 border-b border-gray-700">
            <a href="#" class="text-blue-400 font-bold">新零售配送优化</a>
        </div>
        <div class="mt-4">
            <a href="" class="block px-4 py-3 hover:bg-gray-700 ">用户:{{current_user()}}</a>
            <a href="/optimize" class="block px-4 py-3 hover:bg-gray-700">路径优化</a>
            <a href="/history" class="block px-4 py-3 hover:bg-gray-700">历史记录</a>
            <a href="/setting" class="block px-4 py-3 hover:bg-gray-700">路径优化参数设置</a>
            <a href="/help" class="block px-4 py-3 hover:bg-gray-700">帮助/说明页</a>
        </div>
    </div>
    <!-- 导航栏底部 包含切换按钮  -->
    <div>
        <a href="/feedback" class="block px-4 py-3 hover:bg-gray-700">反馈与建议</a>
        <a href="/logout" class="block px-4 py-3 hover:bg-gray-700" onclick="confirmLogout(event)">退出登录</a>
    </div>
</div>

<!-- 主体内容 -->
<div class="container d-flex justify-content-center align-items-center ">
    <div class="col-12 col-md-8 col-lg-6">
        <!-- 表单列 -->
        <form id="commit_form" method="post" class="mx-auto" enctype="multipart/form-data">

            <div class="mb-3">
                <label for="fileInput" class="form-label">选择文件</label>
                <input type="file" id="fileInput" name="file" class="form-control-file">
            </div>
            <div class="text-center">
                <input type="submit" value="开始优化"
                       class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                       id="submit" onclick=" return checkFileUpload()">
            </div>

            <span>{{error}}</span>

            <div class="text-end mt-4">
                <button type="button" id="toggleDarkMode" class="btn btn-secondary">切换暗色模式</button>
            </div>
            <div id="result" class="mt-4">
                {% if result %}
                <p>优化结果: {{ result }}</p>
                {% endif %}
            </div>

            <div class="container mt-5">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="optimized-tab" data-toggle="tab" href="#random" role="tab"
                           aria-controls="optimized" aria-selected="false">随机结果</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="random-tab" data-toggle="tab" href="#optimized" role="tab"
                           aria-controls="random" aria-selected="true">优化结果</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="checkpoint-tab" data-toggle="tab" href="#checkpoint" role="tab"
                           aria-controls="checkpoint" aria-selected="false">优化过程</a>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="random" role="tabpanel"
                         aria-labelledby="random-tab">
                        <div id="matplotlib-img-container1" style="text-align: center; margin-top: 20px;">
                            {% if randomimg_path %}
                            <img src="{{ url_for('static', filename=randomimg_path) }}" alt="随机结果">
                            {% else %}
                            <p>未加载图像</p>
                            {% endif %}
                        </div>
                    </div>
                    <div class="tab-pane fade" id="optimized" role="tabpanel" aria-labelledby="optimized-tab">
                        <div id="matplotlib-img-container2" style="text-align: center; margin-top: 20px;">
                            {% if relative_path %}
                            <img src="{{ url_for('static', filename=relative_path) }}" alt="优化结果">
                            {% else %}
                            <p>未加载图像</p>
                            {% endif %}
                        </div>
                    </div>
                    <div class="tab-pane fade" id="checkpoint" role="tabpanel" aria-labelledby="checkpoint-tab">
                        <div id="matplotlib-img-container3" style="text-align: center; margin-top: 20px;">
                            {% if optimization_checkpoint_path %}
                            <img src="{{ url_for('static', filename=optimization_checkpoint_path) }}" alt="优化过程">
                            {% else %}
                            <p>未加载图像</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>


        </form>
        <div id="notifications-panel" class="notifications-panel">
            <!-- 通知消息将在这里动态插入 -->
        </div>
    </div>
</div>
<script>
 window.addEventListener('DOMContentLoaded', (event) => {
    var hasSeenHelp = {{ has_seen_help | tojson }};
    if (!hasSeenHelp) {
        alert("请先访问帮助/说明页。");
    }
});
$(document).ready(function() {
    // 显示优化结果选项卡
    $('#myTab a[href="#optimized"]').tab('show');  // 激活优化结果选项卡
});



</script>
<script src="../static/js/logout.js"></script>
<script src="../static/js/be_current.js"></script>
<script src="../static/js/jquery-3.7.1.min.js"></script>
<script src="../static/bootstrap/js/bootstrap.min.js"></script>

</body>
</html>



